<template>
	<view class="pages">
		
		<image src="@/static/index/banner2.png" class="bg-img"></image>
		
		<view class="session-list">
			<view class="session-item" :class="sessionIndex == index?'active':''" v-for="(item,index) in sessionList" :key="index" @tap="changeSession(item,index)">
				{{item.goodsName}}
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				
				<view class="list-price">{{item.sectionBegin}}元到{{item.sectionEnd}}元专区</view>
				
				<view class="list-content">
					
					<view class="time-content">
						<view v-if="item.state == 1">结束时间：{{timeString}}</view>
						<view v-if="item.state == 3 || item.state == 0 || item.state == 2">{{ item.appointEndTimestamp > item.appointTimestamp && nowTimeStamp < item.appointTimestamp?'预约开始':'距离抢购'}}：{{timeString}}</view>
						<view class="status" :style="item.state == 0?'color:#C2C8D3':''" v-if="item.state == 0 || item.state == 1 || item.state == 3">{{item.state == 0?'未开始':item.state == 1 || item.state == 3?'进行中':''}}</view>
					</view>
					
					<view class="goods-info">
						<image :src="item.imageUrl" class="goods-info-img"></image>
						<view>
							<view class="goods-info-title">{{item.goodsName}}</view>
							<!-- <view>已预约人数：<span class="num">{{item.appointCount}}人</span></view> -->
							<view style="margin-top: 24rpx;">收益率：<span class="rate">{{item.profitPercent}}% ~ {{item.profitPercentMax}}%</span></view>
						</view>
					</view>
					
					<view class="submit" v-if="item.state != 0" :style="(item.state == 3 && item.haveAppointed == 1) || item.state == 1 && item.leaveCount == 0?'background: #FFF3F3;color: #FA2F30':item.state == 2?'background:#C2C8D3':''" @tap="goDetail(item)">{{item.state == 3?item.haveAppointed == 1?'已预约':'预约' :item.state == 1?item.leaveCount == 0?'已售罄':'抢购':item.state == 2?'已结束':''}}</view>
					
				</view>
				
			</view>
		</view>
		
		<!-- 购买易货商品输入密码弹窗 -->
		<view class="props" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">确认预约</view>
				
				<view class="numTitle">支付方式</view>
				
				<view class="prop-type">
					
					<view class="prop-type-item" v-for="(item,index) in walletType" :key="index" @tap="changeWalletType(item)">
						<image :src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'" class="radioImg"></image>
						{{item.title}}
					</view>
					
				</view>
				
				<view class="numTitle">预约数量</view>
				
				<view class="num-content">
					<image src="../../static/index/reduce.png" class="num-imgs" @tap="reduce"></image>
				    <view class="num">{{num}}</view>
					<image src="../../static/index/add.png" class="num-imgs" @tap="add"></image>
				</view>
				
			    <view class="numTitle">支付密码</view>
			    <input placeholder="请输入支付密码" class="input-prop" placeholder-class="placeholder" type="number" v-model="payPassword"/>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
		
		<AppointmentAll></AppointmentAll>
	</view>
</template>

<script>
	import AppointmentAll from '@/components/appointmentAll/appointmentAll.vue'
	import { goodsListBuy,appVersionInfo,sessionList,addressList,appointment } from '../../api/api.js'
	export default {
		components:{
		  AppointmentAll
		},
		data() {
			return {
				list:[], // 商品列表
				state:'', // 状态0还未到1抢购中2已过期3可预约
				time:'',  // 倒计时
				appInfo:'',
				noticeInfo:'',
				interval:'',
				timestamp:'',
				sessionList:[],
				sessionIndex:0,
				nowTimeStamp:Date.now(),    // 当前的时间戳
				timeString:'',
				addressList:[],
				addressId:'',
				isProp:false,
				payPassword:'',
				walletId:1,
				walletType:[
					{id:1,title:'多多券'},
					{id:2,title:'快乐豆'},
					{id:3,title:'多多券+快乐豆'},
				],
				goodsId:'',
				num:1,
			}
		},
		onLoad() {

		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 查询场次列表
			this.getSessionList()
			// 获取地址列表
			this.getAddressList()
			//#ifdef APP-PLUS
			// 获取app版本信息
			this.getAppVersionInfo()
			//#endif
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)
		},
		onHide() {
			// 清除所有计时器
			clearInterval(this.interval)
		},
		
		methods: {
			changeWalletType(item) {
				this.walletId = item.id
			},
			// 获取地址列表
			getAddressList() {
				let data = {}
				addressList(data).then( res=> {
					this.addressList = res.data
					// 如果没有添加地址,提示去添加
					if ( this.addressList.length == 0 ) {
						this.addresssInfo = ''
					}else if( this.addressList.length == 1 ) {
						// 如果只有一个地址,直接显示为默认
						this.addresssInfo = this.addressList[0]
						this.addressId = this.addressList[0].id
					}else if( this.addressList.length > 1 ){
						// 如果存在多个地址,先判断是否有默认地址
						let isHaveDefault = this.addressList.some( item => item.isDefault == 1)
						// 如果有,查询默认地址
						if( isHaveDefault ) {
							this.addressList.forEach( item => {
								if( item.isDefault == 1 ) {
									this.addresssInfo = item
									this.addressId = item.id
								}
							})
						}else {
							// 如果没有,默认第一条地址
							this.addresssInfo = this.addressList[0]
							this.addressId = this.addressList[0].id
						}
					}
				})
			},
			// 查询场次列表
			getSessionList() {
				let data = {}
				sessionList(data).then( res=> {
					this.sessionList = res.data.list
					// 获取倒计时
					this.getCountDown()
					// 查询拍卖商品列表
					this.getList()
				})
			},
			// 获取倒计时
			getCountDown() {
				var that = this
				that.state = that.sessionList[that.sessionIndex].state
				that.interval = setInterval(function(){
					that.time = that.countDown(that.sessionList[that.sessionIndex].nextTimestamp)
				},1000)
			},
			changeSession(item,index) {
				this.nowTimeStamp = Date.now()
				this.sessionIndex = index
				// 获取倒计时
				this.getCountDown()
				// 查询拍卖商品列表
				this.getList()
			},
			
			// 查询拍卖商品列表
			getList(goodsId) {
				let data = {
					sessionId:this.sessionList[this.sessionIndex].goodsId,
				}
				goodsListBuy(data).then( res=> {
					this.list = res.data
					if( res.data[0].state == 1 ) {
						this.timeString = this.formatTime(new Date(res.data[0].endTimestamp), "yyyy-MM-dd hh:mm:ss")
					}else if( res.data[0].state == 3 || res.data[0].state == 0 || res.data[0].state == 2 ) {
						if( res.data[0].appointEndTimestamp > res.data[0].appointTimestamp && this.nowTimeStamp < res.data[0].appointTimestamp ) {
							this.timeString = this.formatTime(new Date(res.data[0].appointTimestamp), "yyyy-MM-dd hh:mm:ss")
						}else {
							this.timeString = this.formatTime(new Date(res.data[0].nextTimestamp), "yyyy-MM-dd hh:mm:ss")
						}
					}
				})
			},
			
			sure() {
				uni.showLoading({
					title: ''
				});
				let data = {
					goodsId:this.goodsId,
					addressId:this.addressId,
					walletType:this.walletId,
					payPassword:this.payPassword,
					quantity:this.num
				}
				appointment(data).then( res=> {
					uni.hideLoading()
					uni.showToast({
						title:'预约成功',
						icon:'none'
					})
					this.closeProp()
				})
			},
			closeProp() {
				this.isProp = false
				this.payPassword = '',
				this.num = 1
			},
			
			goDetail(item) {
				if( item.state == 3 ) {  // 预约
				    if( item.haveAppointed == 1 ) {  // 已预约
					    return
				    }
					if( this.addressList.length == 0 ) {
						uni.showToast({
							title:'请先添加默认地址',
							icon:'none'
						})
						return
					}
					this.goodsId = item.goodsId
					this.isProp = true
				}else if( item.state == 1 ) {  // 抢拍
					var orderInfo = {
						goodsImg:item.imageUrl,
						goodsId:item.goodsId,
						goodsTitle:item.goodsName,
						goodsPrice:item.nowPrice,
						goodsNum:1,
					}
					var orderInfo = JSON.stringify(orderInfo)
					uni.navigateTo({
						url:'../goods/submitOrder?orderInfo=' + orderInfo + '&payType=1'+ '&isVip=0'
					})
				}else if( item.state == 2 ) {  // 已结束
					uni.showToast({
						title:'当前抢购已结束，请等待下一场抢购',
						icon:'none'
					})
				}
				// uni.navigateTo({
				// 	url:'/pages/index/goodsDetail?goodsId=' + item.goodsId + '&timestamp=' + this.timestamp
				// })
			},
			reduce() {
				if( this.num == 1 ) {
					return
				}
				this.num--
			},
			
			add() {
				this.num++
			}
		}
	}
</script>

<style>
	page {
		background-color: #EBF3FF;
	}
</style>
<style lang="less">
	
	.pages {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		
		.bg-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 420rpx;
			z-index: 1;
		}
		
		.session-list {
			z-index: 1;
			position: absolute;
			padding: 0 6rpx;
			display: flex;
			align-items: center;
			margin-top: 310rpx;
			width: 678rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 100rpx;
			border: 2rpx solid #FE3B33;
			.session-item {
				flex: 1;
				height: 68rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FE3B33;
				line-height: 68rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-radius: 40rpx;
			}
			.active {
				color: #FFFFFF;
				background: #FE3B33;
			}
		}
		.list {
			padding-bottom: 150rpx;
			margin-top: 430rpx;
		}
		.list-item {
			margin-bottom: 40rpx;
			width: 710rpx;
			background: #F7FAFF;
			padding-bottom: 16rpx;
			border-radius: 20rpx;
			.list-price {
				width: 710rpx;
				height: 80rpx;
				background-image: url('../../static/index/price-banner.png');
				background-repeat: no-repeat;
				background-size: cover;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.list-content {
				position: relative;
				margin-left: 4rpx;
				width: 702rpx;
				height: 300rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.time-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0 26rpx 0;
					width: 654rpx;
					border-bottom: 1rpx solid #EEEEEE;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #444444;
					font-style: normal;
					text-transform: none;
					.status {
						font-weight: 500;
						font-size: 28rpx;
						color: #FE3B33;
					}
				}
				.goods-info {
					margin-top: 24rpx;
					width: 654rpx;
					display: flex;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					.goods-info-img {
						width: 164rpx;
						height: 164rpx;
						margin-right: 24rpx;
					}
					.goods-info-title {
						margin: 8rpx 0 24rpx 0;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 39rpx;
						font-style: normal;
						text-transform: none;
					}
					.num {
						color: #1A1A1A;
					}
					.rate {
						color: #FE3B33;
					}
				}
			    .submit {
					position: absolute;
					right: 20rpx;
					bottom: 26rpx;
					width: 160rpx;
					height: 60rpx;
					background: #FE3B33;
					border-radius: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
		
		
		.top-content {
			display: flex;
			align-items: center;
			margin-top: 60rpx;
			width: 690rpx;
			height: 180rpx;
			overflow-y: auto;
			.top-item {
				margin-right: 20rpx;
				width: 150rpx;
				font-size: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #616871;
				.top-time {
					text-align: center;
					line-height: 60rpx;
					width: 150rpx;
					height: 60rpx;
					background: #f3f3f3;
					color: rgba(0, 0, 0, 0.4);
					border-radius: 80rpx;
					font-size: 34rpx;
					margin-bottom: 15rpx;
				}
			}
			.active {
				color: #FE3B33;
				.top-time {
					background: #FE3B33;
					color: #ffffff;
				}
			}
		}
		.time-list {
			margin-top: 30rpx;
			width: 640rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color:#FE3B33;
			font-size: 28rpx;
			.time-content {
				display: flex;
				align-items: center;
				view {
					margin-left: 15rpx;
					text-align: center;
					line-height: 52rpx;
					width: 52rpx;
					height: 52rpx;
					background: #FE3B33;
					border-radius: 10rpx;
					opacity: 0.84;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					color: #FFFFFF;
				}
			}
		}
		
		.banner-content {
			position: relative;
			width: 100%;
			height: 450rpx;
			// background-image: url(../../static/index/bannerImg.png);
			// background-size: cover;
			.bannerIcon {
				width: 100%;
				height: 450rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			.time-content {
				margin-top: 280rpx;
				color: #FFFFFF;
				margin-left: 202rpx;
				display: flex;
				align-items: center;
				view {
					margin-right: 38rpx;
					text-align: center;
					line-height: 110rpx;
					width: 90rpx;
					height: 110rpx;
					background: #FE3B33;
					box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0,62,149,0.8);
					border-radius: 10rpx;
					opacity: 0.84;
					border: 2rpx solid #FFFFFF;
					font-size: 48rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		// 公告
		.notice-content {
			display: flex;
			align-items: center;
			.notice-title {
				text-align: center;
				line-height: 60rpx;
				width: 100rpx;
				height: 60rpx;
				background: rgba(255,206,0,0.8);
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
			}
			.notice-content {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 24rpx;
				width: 626rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #FE3B33;
			}
		}
		
		// .商品专区 
		.title {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 36rpx;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 50rpx;
			letter-spacing: 1rpx;
			.procss {
				margin-top: -10rpx;
				width: 150rpx;
				height: 10rpx;
				background: #FE3B33;
			}
		}
		
		.goods-list {
			margin-top: 55rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item {
				display: flex;
				width: 690rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
				margin-bottom: 30rpx;
				.goods-img {
					width: 250rpx;
					height: 250rpx;
				}
				.goods-title {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin: 0 0 0 16rpx;
					width: 420rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 700;
					color: #1A1A1A;
					line-height: 40rpx;
				}
				.price-content {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						margin-left: 16rpx;
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 700;
						color: #d80202;
						line-height: 48rpx;
						span {
							margin-left: 16rpx;
							font-weight: 700;
							font-size: 30rpx;
							color: #a1a1a1;
							text-decoration: line-through;
						}
					}
				}
				.submit {
					position: absolute;
					right: 0;
					margin-left: 16rpx;
					margin-top: 60rpx;
					margin-right: 16rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
					width: 140rpx;
					height: 56rpx;
					background: #FE3B33;
					border-radius: 40rpx;
				}
				.appointed {
					background: #FFF3F3 !important;
					color: #FA2F30 !important;
				}
				.nomal {
					background:#a1a1a1;
					color: #FFFFFF;
				}
			}
			.item:nth-child(2n) {
				margin-right: 0;
			}
		}
		
		.props {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: 2;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.prop-type {
					margin-top: 24rpx;
					width: 470rpx;
					display: flex;
					align-items: center;
					
					.prop-type-item {
						display: flex;
						align-items: center;
						margin-right: 10rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						.radioImg {
							width: 36rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}
					}
					
				}
				.num-content {
					width: 470rpx;
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					.num-imgs {
						width: 46rpx;
						height: 46rpx;
					}
					.num {
						margin: 0 36rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1A1A1A;
					}
				}
				.input-prop {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
